/*
 * Copyright 2016 ZTE Corporation.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
(function(Application){

	Application.registerElement(Application.View.Element.extend({

		content: function(){
			return "";
		},

		css: function(){
			return {
				"-webkit-border-radius": "30px",
				"-moz-border-radius": "30px",
				"background-image": "url('')",
				"background-size": "cover",
				"border": "2px solid #000",
				"border-radius": "30px",
				"height": "30px",
				"width": "30px"
			};
		},
	/*
		initialize: function(){

			//init
			this.on("append", function(event) {
				jsPlumb.setId(this.$el, this.model.id);
				jsPlumb.draggable(this.$el, {

					cancel: ".focus",

					snap: ".guide",

					snapMode: "inner",

					start: _.bind(function (event, ui) {
						this.$el.addClass("dragging");
					}, this),

					stop: _.bind(function (event, ui) {
						this.model.set({
							position: {left: ui.position.left, top: ui.position.top}
						});
					}, this)

				});

				jsPlumb.makeTarget(this.$el.attr("id"), {
					anchor: ["Top", "RightMiddle", "LeftMiddle", "Bottom"],
					detachable: false,
					endpoint: "Blank",
					isTarget: true,
					maxConnections: -1,
					connectorPaintStyle: {
						lineWidth: 2
					},
					connector: 'StateMachine',
					ConnectionOverlays: [
						["Arrow", {
							location: 1,
							id: "arrow",
							length: 14,
							foldback: 0.8
						}],
						["Label", {label: "FOO", id: "label", cssClass: "aLabel"}]
					]
				});

				this.on("add_connection", function(event){
					if(this.model.id === Backbone.$(event.target.el).attr("id")){
						_.each(jsPlumb.getConnections({target: this.$el.attr("id")}), function(targetConnection){
							jsPlumb.detach(targetConnection);
						});

					}else{
						this.model.addConnection(Backbone.$(event.target.el).attr("id"));
					}
				}, this);
				this.on("remove_connection", function(event){
					this.model.removeConnection(Backbone.$(event.target.el).attr("id"));
				}, this);
				this.model.on("change", function(event){
					this.render();
					jsPlumb.repaintEverything();
				}, this);
				this.model.on("remove", function(event){
					this.remove();
				}, this);


			});
			// begin init display
			var initPara = ['serviceTemplateId','containerapiUrl','resourceUrl','statusUrl','instanceId', 'callbackId','roUrl','flavor','flavorParams','vnfmId','iaUrl'];

			var count = initPara.length;

			var initParaMap = {};

			for ( var int = 0; int < count; int++)
			{
				var parameterObj = {type:typeof initPara[int],value:""};

				initParaMap[initPara[int]] = parameterObj;
			}

			// new created Start Event
			this.model.set({
				name: "StartEvent",
				output:  initParaMap
			});

			// end init display

		},
	*/

		dialog: function(event){
			if(event) event.stopPropagation();
			var dialog = new Application.View.Dialog({
				id: (this.model.get("id") + "_dialog"),
				model: this.model,
				title: "Edit Start Event"
			});
			dialog.on("appendInput", function(event){
				var parameter = new Application.View.DialogParameter({
					direction: "output",
					editable: true,
					model: this.model,
					name: _.uniqueId("Parameter"),
					sources: ["string"],
					type : "string"
				});
				event.dialog.$el.find("form .inputParameter").append(parameter.render().el);
				parameter.trigger("rename");
			});
			dialog.on("appendOutput", function(event){
				var parameter = new Application.View.DialogParameter({
					direction: "variable",
					editable: true,
					model: this.model,
					name: _.uniqueId("Parameter"),
					sources: ["string"],
					type : "string"
				});
				event.dialog.$el.find("form .outputParameter").append(parameter.render().el);
				parameter.trigger("rename");
			});
			dialog.on("confirm", function(event){
				this.model.set({
					name: event.dialog.$el.find("#name").val(),
					output: _.object(_.map(event.dialog.$el.find(".parameter.output"), function(parameter){
						var json = Backbone.$(parameter).data("parameter").toJSON();
						return [Backbone.$(parameter).data("parameter").name(), json];
					})),
					variable: _.object(_.map(event.dialog.$el.find(".parameter.variable"), function(parameter){
						var json = Backbone.$(parameter).data("parameter").toJSON();
						return [Backbone.$(parameter).data("parameter").name(), json];
					}))
				});
			});
			
		
			dialog.on("show", function(event){
				event.dialog.$el.find("form").append(
					"<div class=\"form-group\">"
						+"<label for=\"\" class=\"col-sm-3 control-label\">Name</label>"
						+"<div class=\"col-sm-9\"><input type=\"text\" autocomplete=\"off\" class=\"form-control\" id=\"name\" name=\"name\" value=\"" + this.model.get("name") + "\"/></div>"
					+"</div>"
					+"<hr/>"
					+ "<div class=\"inputParameter\"></div>"
					+"<hr/>"
					+ "<div class=\"outputParameter\"></div>"

				);
				event.dialog.$el.find(".modal-footer .pull-left").append(
					"<button type=\"button\" class=\"btn btn-default\" data-event=\"appendInput\">Append Input Parameter</button>"
					+ "<button type=\"button\" class=\"btn btn-default\" data-event=\"appendOutput\">Append Variable</button>"
				);

				var initPara = ['serviceTemplateId','containerapiUrl','resourceUrl','statusUrl','instanceId', 'callbackId','roUrl','flavor','flavorParams','vnfmId','iaUrl'];
				var count = initPara.length;

				var isInitPara = function(name)
				{
					for ( var int = 0; int < count; int++)
					{
						if(name == initPara[int])
						{
							return true;
						}
					}

					return false;
				};

				// end init display
				
				// input params
				_.each(this.model.get("output"), function(parameter, name){
					var options = {
						direction: "output",
						editable: isInitPara(name)?false:true,
						model: this.model,
						hide: isInitPara(name)?"hide":"",
						name: name,
						sources: ["string"]
					};
					if(isInitPara(name)) {
						event.dialog.$el.find("form").append(new Application.View.DialogParameter(options).render().el);
					} else {
						event.dialog.$el.find("form .inputParameter").append(new Application.View.DialogParameter(options).render().el);
					}
				}, this);
				
				// variables
				_.each(this.model.get("variable"), function(parameter, name){
					event.dialog.$el.find("form .outputParameter").append(new Application.View.DialogParameter({
						direction: "variable",
						editable: true,
						model: this.model,
						hide: "",
						name: name,
						sources: ["string"]
					}).render().el);
					
				}, this);
				
			});
			dialog.show();
		}

	}, {type: "StartEvent"}));

})(window.BPMN4TOSCAModeler);